<template>
  <div class="common-layout">
    <el-container>
      <el-aside
        ><el-row class="tac">
          <el-col :span="12">
            <div><img src="../../assets/shuj-imgs/icon01.png" alt="" /></div>
            <el-menu class="el-menu-vertical-demo" :router="true">
              <el-sub-menu
                v-for="item in ListData"
                :key="item.id"
                :index="item.path"
                @click="handelTitle(item.title)"
              >
                <template #title>
                  <span class="iconfont" :class="item.icons"></span>&emsp;
                  <span>{{ item.title }}</span>
                </template>
                <el-menu-item
                  v-for="data in item.children"
                  :key="data.id"
                  :index="data.path"
                  @click="handelNum(data.title)"
                  >| &emsp;{{ data.title }}</el-menu-item
                >
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-row></el-aside
      >
      <el-container>
        <el-header>
          <div class="log">
            <img src="../../assets/shuj-imgs/icon09.png" alt="" />
          </div>
          <span>姓名&emsp;|&emsp;</span>
          <span>个人中心&emsp;|&emsp;</span>
          <span @click="clearLS">退出</span>
        </el-header>
        <el-main>
          <div class="titleClss">
            <span v-for="item in MianData" :key="item.id"
              >{{ item.name }}&emsp;|&emsp;</span
            >
          </div>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    // 退出提示
    const open2 = (index: string) => {
      ElMessage({
        showClose: true,
        message: index,
        type: "success",
      });
    };
    // 总的数据
    const ListData = ref([
      {
        id: 1,
        path: "/home/data",
        icons: "icon-shujutongji",
        title: "数据中心",
        children: [
          { id: 1.1, path: "/home/data/num", title: "实时数据" },
          { id: 1.2, path: "/home/data/yh", title: "客户数据" },
        ],
      },

      {
        id: 2,
        path: "/home/ddgl",
        icons: "icon-dingdanguanli",
        title: "订单管理",
        children: [{ id: 2.1, path: "/home/ddgl/quanb", title: "全部订单" }],
      },

      {
        id: 3,
        path: "/home/spgl",
        icons: " icon-shangpinguanli",
        title: "商品管理",
        children: [
          { id: 3.1, path: "/home/spgl/Commodity", title: "全部商品" },
        ],
      },
      {
        id: 4,
        path: "/home/cxgl",
        icons: " icon-cuxiaoguanli",
        title: "促销管理",
        children: [
          { id: 4.1, path: "/home/cxgl/miaos", title: "秒杀管理" },
          { id: 4.2, path: "/home/cxgl/yhq", title: "优惠券" },
        ],
      },
    ]);
    // 使用路由
    const router = useRouter();
    // 内容上的小标题
    const MianData = ref([
      {
        id: new Date().getTime(),
        name: `首页`,
      },
    ]);

    //  退出登录后跳转到login页面
    const clearLS = () => {
      open2("退出成功");
      router.push("/login");
    };
    // 点击获取title
    const handelTitle = (index: string) => {
      if (MianData.value.length == 1 || MianData.value.length == 2) {
        MianData.value.push({
          id: new Date().getTime(),
          name: index,
        });
      }
      if (MianData.value[1].name !== index) {
        MianData.value.splice(1, 1);
        MianData.value[1].name = index;
      }
    };
    // 点击获取二级title
    const handelNum = (index: string) => {
      if (MianData.value.length == 2) {
        MianData.value.push({
          id: new Date().getTime(),
          name: index,
        });
      }
      if (MianData.value[2].name !== index) {
        MianData.value[2].name = index;
      }
    };
    return {
      ListData,
      MianData,
      open2,
      clearLS,
      handelTitle,
      handelNum,
    };
  },
};
</script>

<style lang="less" scoped>
.titleClss {
  text-indent: 10px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  background-color: #f5f5f5;
  margin-bottom: 15px;
}

.el-aside {
  width: 250px;
  background-color: #848492;
  height: calc(100vh);
  margin-right: 20px;
}
.el-menu {
  width: 250px;
  background-color: #848492;
}

.el-sub-menu__title > span {
  color: #fff;
  font-weight: 900;
}
.el-menu-item {
  font-weight: 900;
  color: #fff;
  background-color: #848492;
}
.is-active {
  font-weight: 900;
  color: black;
}

.el-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #5f4e72;
  .log {
    margin-right: 10px;
  }
  span {
    color: #fff;
    cursor: pointer;
  }
}

.el-main {
  padding: 10px;
  height: calc(100vh - 60px);
  background-color: rgb(250, 250, 250);
}

/deep/.el-sub-menu:hover {
  background-color: transparent !important;
}
</style>
